﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jquery-gridview-demo by wyz</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <link href="jquery.pagination.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.gridview.js" type="text/javascript"></script>
	<style>
	.tabcls a{color:#f89232}
	</style>
    <script type="text/javascript">

        $(function() {
        	$.ajaxSetup({
        		type:"GET"  //Firefox3.5下请求静态文件(xml,html)时POST方法报405错误
        		, dataType: "xml"
        		, error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("错误信息："+XMLHttpRequest.status+"\n"+textStatus+"\n"+errorThrown+"\n"+this.url);
                }
        	});

        	//不带分页的表格
            $.ajax({
				  url: "XMLFile1.xml"
                , success: function(data) {
                    $("#grid").gridview(data
                    	,{
	                        root: "root1"
	                        , row: "table"
	                        , fields: [
	                            { data: "id", text: "ID" ,display:false,id:"id"}
	                            , { data: "name", text: "名字", dataFormat: nameHandler ,id:"name"}
	                            , { text: "操作", dataFormat: optionHandler ,listeners:{event:"click",fn:function(row){alert("单元格，ID是："+row.children("id").text())}},id:"opt"}
>>>>>>> .r14
	                        ]
	                        , listeners:{event:"click",fn:function(row){alert("行，ID是："+row.children("id").text())}}
	                        , id: "tab1"
	                        , css: "tabcls"
	                    }
	                );
                }
            });
            function optionHandler(row){return "<font color=red>删除</font>"}
            function nameHandler(row){return "<a href=#"+row.children("id").text()+">"+row.children("name").text()+"</a>"}
            
            //带分页的表格
            $.ajax({
                  url: "XMLFile3.xml"
                , success: function(data) {
                    $("#grid-with-pager").gridview(data
                    	,{
	                        root: "table1"
	                        , row: "row"
	                        , fields: [
	                            { data: "id", text: "ID", id:"id", display:false }
	                            , { data: "name", text: "名字", dataFormat: nameHandler ,id:"name"}
	                            , { text: "操作", dataFormat: optionHandler ,listeners:{event:"click",fn:function(row){alert("单元格事件，ID是："+row.children("id").text())}},id:"option"}
	                        ]
	                        , listeners:{event:"click",fn:function(row){alert("行事件，ID是："+row.children("id").text())}}
	                        , id: "tab2"
	                        , css: "tabcls"
	                    }
	                    ,{
	                    	display: true
	                    	, objAjax: this //必须将本次jquery ajax对象传入。
	                    	, pagesize:5	                    
	                    }
	                );
                }
            });
			
			//json的表格
            $.ajax({
                  url: "json.txt"
				  ,dataType:"json"
                , success: function(data) {
                    $("#grid-json").gridview(data
                    	,{
	                        root: "root"
	                        , fields: [
	                            { data: "id", text: "ID",dataFormat:function(r){return "<font color=red>"+r.id+"</font>"},display:false,id:"id"}
	                            , { data: "name", text: "名字" ,id:"name"}
	                            , { text: "操作", dataFormat:function(r){return "删除"} ,listeners:{event:"click",fn:function(row){alert("单元格事件，ID是："+row.id)}},id:"opt"}
	                        ]
	                        , listeners:{event:"click",fn:function(row){alert("行事件，ID是："+row.id)}}
	                        , id: "tab3"
	                        , css: "tabcls"
	                    }
	                );
                }
            });
        });
        
    </script>
</head>
<body>无分页的表格
<div id="grid"></div>
<br />
<br />

带分页的表格
<div id="grid-with-pager"></div>
<br />
<br />

json表格
<div id="grid-json"></div>


作者：wyongzhi<br/>
QQ/Email/MSN：wyongzhi@gmail.com<br/>
Project Page：<a href="http://code.google.com/p/jquery-gridview/" target="_blank">http://code.google.com/p/jquery-gridview/</a><br />
Home Page：<a href="http://wyz.67ge.com/" target="_blank">http://wyz.67ge.com</a>
<div id="d" />
</body>
</html>


